<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    .box{
      width: 300px;
      height: 200px;
      border: 1px solid #000;
      margin:100px auto;
      background-color: red;
      /*
        过渡： 由一种状态 贱贱（渐渐）的 变化到另一种状态；
      */
      /*过渡:transitoin: 过渡的属性 持续时间*/
      /*transition: width 1s, background 1s,border-radius 1s;*/
      /* 所有的属性都发生过渡 可以用all代替*/
      transition: all 1s;
    }

    .box:hover{
      width: 1000px;
      background-color: blue;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>